<template>
  <el-table
    :data="data"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="120"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      label="操作" >
      <template #default="scope">
        <div style="text-align: center;">
          <el-button type="primary"  @click="handleClick(scope.row)" size="small">查看</el-button>
          <el-button size="small">编辑</el-button>
        </div>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
      :page-size="5"
      :total="tableData.length"
      @current-change="changePage"
      layout="prev, pager, next"
     />
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'

const handleClick = (row) => {
  console.log(row)
}

const tableData = ref([
          {
            index: 0,
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            index: 1,
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          }, {
            index: 3,
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          }, {
            index: 4,
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          },
          {
            index: 5,
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            index: 6,
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          }, {
            index: 7,
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          }, {
            index: 8,
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          }
        ]
)

let count = 0
let size = 5
const data = ref([])
const updateData = () => {
  data.value.splice(0, data.value.length)
  console.log(tableData.value)
  const end = size + count * size <= tableData.value.length? (count + 1) * size: 
    count * size + tableData.value.length - (count * size)
  const temp = tableData.value.slice(count * size, end)
  /*console.log(count * size, end)*/
  for(const item of temp)
    data.value.push(item)
  /*console.log('update')*/
  /*console.log(data.value)*/
}

const changePage = (index) => {
  console.log(index)
  count = index - 1
  updateData()
}

onMounted(() => {
  updateData()
  /*console.log(tableData.value)*/
})

</script>
